<template>
<div class="note-example-box">
	<el-button @click='fnB1'>ref 声明</el-button>
	{{refVal1}}
	<div class="note-code-case">
		<textarea :value='codeVal' disabled style="height: 360px;"></textarea>
	</div>
</div>
</template>  
<script setup>
import { ref, watch } from 'vue'

const refVal1 = ref('aaa');
const fnB1 = () => {
	refVal1.value = 'bbb';//变更有效
	console.log('fnB1', 11);
};
watch(refVal1, (newVal, oldVal) => {
	console.log("新值:", newVal, "老值:", oldVal);
});
const codeVal = `<template>
<el-button @click='fnB1'>ref 声明</el-button>
{{refVal1}}
</template>
<script setup>
import { ref, watch } from 'vue'

const refVal1 = ref('aaa');
const fnB1 = () => {
	refVal1.value = 'bbb';//变更有效
	console.log('fnB1', 11);
};
watch(refVal1, (newVal, oldVal) => {
	console.log("新值:", newVal, "老值:", oldVal);
});
<script>`;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>